<template>
  <div class="h-[calc(100vh-46px)] bg-D8E3FE p-15">
    <div
      class="c-bg-white-50 pb-30 px-20 rounded-20 border border-solid border-white text-center"
    >
      <div>
        <div class="mt-20 text-18 font-bold leading-25">
          <span class="text-with-underline">精彩作品</span>
          <span>，值得期待</span>
        </div>
        <div
          v-if="videoInfoParam.videoStatus === 'SUCCESS'"
          class="mt-14 text-13"
        >
          <svg-icon name="icon-chenggong" :size="13" color="#17B459" />
          <span class="ml-5">视频已生成，请点击保存相册</span>
        </div>
        <div
          v-else-if="videoInfoParam.videoStatus === 'FAIL'"
          class="mt-14 text-13"
        >
          <div class="text-center text-FF4A35">
            <svg-icon name="icon-shibai" :size="13" color="#FF4A35" />
            <span class="ml-5">视频生成失败</span>
          </div>
          <div
            v-if="videoInfoParam.videoTaskFailMessage"
            class="text-center mt-8"
          >
            失败原因：{{ videoInfoParam.videoTaskFailMessage }}
          </div>
        </div>
        <div v-else class="mt-14 text-13">努力生成中</div>
      </div>
      <div class="h-174 mt-10 w-full relative rounded-10 overflow-hidden">
        <video
          v-if="
            videoInfoParam.videoStatus === 'SUCCESS' && videoInfoParam.videoUrl
          "
          class="size-full"
          :src="videoInfoParam.videoUrl"
          :autoplay="false"
          :controls="true"
          :loop="false"
        />
        <img
          v-else
          class="size-full object-contain"
          :src="videoInfoParam.humanImageUrl"
          alt="视频图片"
        />
        <div
          v-if="!['SUCCESS', 'FAIL'].includes(videoInfoParam.videoStatus)"
          class="c-translucent-balck50 c-animation-opacity size-full left-0 top-0 absolute text-white flex flex-col justify-center items-center"
        >
          <view class="loading-circle w-42 h-42 rounded-[50%]" />
          <view class="mt-5 text-14">{{ videoInfoParam.videoProgress }}%</view>
        </div>
      </div>
      <div
        v-if="videoInfoParam.videoStatus === 'SUCCESS'"
        class="flex justify-center items-center"
      >
        <div class="w-215">
          <ButtonFooter
            buttonText="立即下载"
            class="mt-30"
            :rounded-num="24"
            @confirm="confirmDownload"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getVideoInfo, VideoInfoData } from "@/api/GenerateDetail";
import { onMounted, onUnmounted, ref } from "vue";
import { useRoute } from "vue-router";
import { downloadVideo } from "@/utils/downloader";

defineOptions({
  name: "GenerateDetail"
});

const route = useRoute();
const routeId = ref(route.params.Id as string);
const videoInfoParam = ref<VideoInfoData>({
  videoName: "",
  humanImageUrl: "",
  humanType: 0,
  videoProgress: 0,
  videoStatus: "",
  videoTaskFailMessage: "",
  videoUrl: ""
});
const timer = ref<NodeJS.Timeout | null>(null); // 用于存储定时器ID

// 立即下载
const confirmDownload = async () => {
  try {
    await downloadVideo.download(
      videoInfoParam.value.videoUrl,
      videoInfoParam.value.videoName
    );
  } catch (error) {
    console.error("下载出错:", error);
  }
};

// 获取视频信息
const getVideoInfoPort = async () => {
  try {
    const data = await getVideoInfo(routeId.value);
    videoInfoParam.value = data;

    // 如果状态不是SUCCESS或FAIL，则开启轮询
    if (!["SUCCESS", "FAIL"].includes(data.videoStatus)) {
      startPolling();
    }
  } catch (error) {
    console.error("获取视频信息失败:", error);
    // 出错时也停止轮询
    stopPolling();
  }
};

// 开始轮询
const startPolling = () => {
  // 先清除已有定时器
  stopPolling();

  // 设置1.5秒间隔的轮询
  timer.value = setInterval(() => {
    getVideoInfoPort();
  }, 1500);
};

// 停止轮询
const stopPolling = () => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
};

onMounted(() => {
  getVideoInfoPort();
});

// 组件卸载时清除定时器
onUnmounted(() => {
  stopPolling();
});
</script>

<style scoped></style>
